<template>
  <div>
    <el-dialog width="30%" :visible="visible" title="编辑" >
      <el-form :model="formData" ref="formRef" :rules="formRules" label-width="100px">
        <el-form-item prop="fee" label="价格">
          <el-input type="text" v-model="formData.fee"/>
        </el-form-item>
        <div style="text-align: right">
          <el-button @click="$emit('toggleModal',false)">取消</el-button>
          <el-button @click="confirm()" type="primary">确定</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { updateVipList } from '@/api/user/vip'
export default {
  props: {editData: Object,visible: Boolean},
  data(){
    return {
      formData: {
        fee: '',
      },
      formRules: {
        fee: [{
          required: true,
          message: "请输入价格",
          trigger: "blur"
        },
        {
          type: 'number',
          message: '请输入数字',
          trigger: ['change','blur'],
          transform: value => Number(value),
        }]
      }
    }
  },
  watch: {
    editData(newVal){
      this.formData.fee = newVal.fee;
    }
  },
  methods: {
    confirm(){
      this.$refs.formRef.validate(async valid => {
        if(!valid){return}
        updateVipList({
          ...this.editData,
          field: 'fee',
          value: this.formData.fee
        }).then(() => {
          this.$emit('getList');
          this.$emit('toggleModal',false)
        })
      })
    }
  }
}
</script>